<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/left.css">
    <link rel="stylesheet" href="css/jquery.dialogbox.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/jquery.dialogBox.js"></script>
    <script>
        $(function () {
            var vue = new Vue({
                el:'#app',
                data:{
                    pages:1,
                    <!-- 调整分页数据,查询参数设置-->
                    param:{subType:0,classsess:0,page:1,rows:8,isCoach:0},
                    url:'http://localhost:8889',
                    coachs:[],
                    subjects:[],
                    classInfoes:[]
                },
                methods:{
                    getSubjects:function(){
                        var that = this;
                        $.getJSON(that.url+"/Subject/query",function(data){
                            that.subjects = data;
                            console.log(that.subjects)
                        })
                    },
                    getCoachs:function(){
                        var that = this;
                        var ps = {
                            page:that.param.page,
                            rows:that.param.rows
                        }
                        $.getJSON(that.url+"/coach/query",ps,function(data){
                            that.coachs = data.list;
                            console.log(that.coachs)
                        })
                    },
                    query:function () {
                        var that = this;
                        var ps = {
                            page:that.param.page,
                            rows:that.param.rows
                        }

                        if(that.param.subType>0){
                            ps.subId = that.param.subType;
                            console.log(ps.subId)
                        }
                        var roleCoaId = localStorage.getItem("role_id")
                        if(roleCoaId>0&&roleCoaId!=null){
                            ps.coaId = roleCoaId;
                            that.param.isCoach = 1
                        }
                        if(that.param.classsess > 0){
                            if(that.param.classsess ==1){
                                ps.classSess = '上午场';
                            }else if(that.param.classsess == 2){
                                ps.classSess = '下午场';
                            }
                            console.log(ps.classSess)

                        }
                        $.getJSON(that.url+'/class/query',ps,function(data){
                            that.classInfoes = data.list;
                            that.pages =  data.pages;
                            console.log(that.classInfoes[0].teaTime);
                            /*for(var i = 0;i<that.classInfoes.length;i++){
                                that.classInfoes[i].teaTime = that.classInfoes[i].teaTime.Format("yyyy-MM-dd HH:mm:ss");
                                console.log(that.classInfoes[0].teaTime);
                                console.log('我到这了')
                            }*/
                            console.log(ps.subId)
                            console.log(ps.classSess)
                            console.log(ps)
                        })
                    },
                    <!--重置函数-->
                    reset:function () {
                        this.param.subType = 0;
                        this.param.classsess = 0;
                        this.query();
                    },

                    <!--分页函数-->
                    setpage:function(page){
                        this.param.page = page;
                        this.query();
                    },
                    enable:function(c){
                        var ps = {
                            classId:c.classId
                        }
                        if(c.status==1){
                            ps.status=2;
                        }else if(c.status==2){
                            ps.status=1;
                        }
                        var that = this;
                        $('#type-delBox').dialogBox({
                            hasClose: true,
                            hasBtn: true,
                            width: 300,
                            height: 200,
                            confirmValue: '确认',
                            confirm: function(){
                                $.get(that.url+"/class/enable/"+ps.classId+"/"+ps.status,function(data){
                                    if(data!=null){
                                        that.query();
                                    }else{
                                        $('#type-delBox2').dialogBox({
                                            autoHide: true,
                                            time: 2000,
                                            width:300,
                                            height:60,
                                            content: '删除失败！'
                                        });
                                    }
                                })
                            },
                            cancelValue: '取消',
                            title: '提醒',
                            content: '你确定给该教练请假吗！'
                        });
                    },
                    remove:function(classId,reverse){
                        var that = this;
                        $('#type-delBox').dialogBox({
                            hasClose: true,
                            hasBtn: true,
                            width: 300,
                            height: 200,
                            confirmValue: '确认',
                            confirm: function(){
                                if(reverse>0){
                                    setTimeout(function(){
                                        $('#type-delBox2').dialogBox({
                                            autoHide: true,
                                            time: 2000,
                                            width:300,
                                            height:60,
                                            content: '该课程已被预约无法删除！'
                                        });
                                    }, 500);
                                }else{
                                    $.get(that.url+'/class/remove/'+classId,function (data) {
                                        if(data!=null){
                                            that.query();
                                        }else{
                                            $('#type-delBox2').dialogBox({
                                                autoHide: true,
                                                time: 2000,
                                                width:300,
                                                height:60,
                                                content: '删除失败！'
                                            });
                                        }
                                    })
                                }

                            },
                            cancelValue: '取消',
                            title: '提醒',
                            content: '你确定删除该课程信息吗！'
                        });
                        /*$.get(that.url+'/class/remove/'+classId,function (data) {
                            if(data!=null){
                                alert("删除成功"+classId)
                                that.query();

                            }else{
                                alert("删除失败"+classId)

                            }
                        })*/
                    },
                    show:function(classId,reverse){
                        $('#type-delBox').dialogBox({
                            hasClose: true,
                            hasBtn: true,
                            width: 300,
                            height: 200,
                            confirmValue: '确认',
                            confirm: function(){
                                if(reverse>0){
                                    setTimeout(function(){
                                        $('#type-delBox2').dialogBox({
                                            autoHide: true,
                                            time: 2000,
                                            width:300,
                                            height:60,
                                            content: '该课程已被预约无法修改！'
                                        });
                                    }, 500);
                                }else{
                                    window.open("classinfo.html?classId="+classId)
                                }

                            },
                            cancelValue: '取消',
                            title: '提醒',
                            content: '你确定修改该课程信息吗！'
                        });

                    },
                    order:function(classId,reverse){
                        var that = this;
                        $('#type-delBox').dialogBox({
                            hasClose: true,
                            hasBtn: true,
                            width: 300,
                            height: 200,
                            confirmValue: '确认',
                            confirm: function(){
                                if(reverse>=3){
                                    setTimeout(function(){
                                        $('#type-delBox2').dialogBox({
                                            autoHide: true,
                                            time: 2000,
                                            width:300,
                                            height:60,
                                            content: '该课程预约人数已上限！'
                                        });
                                    }, 500);
                                }else{
                                    location.href="reverse.html?classId="+classId;
                                }
                            },
                            cancelValue: '取消',
                            title: '提醒',
                            content: '你预约确定该课程吗！'
                        });
                    }
                }
            })
            vue.query();
            vue.getSubjects();
            vue.getCoachs();
            $("#header").load("header.html");
            $("#left").load("left.html");
        })
    </script>
    <style type="text/css" media="screen">
        .bg {
            background:url(images/subject/bg2.jpg) no-repeat center fixed;
            background-size:100%;
        }
        .bgcon{

            background: white;
            opacity:0.9;
        }
        .thead{
            border-bottom: #00FF00;
        }
        .tithead{
            margin-left:5px;
            margin-bottom: 30px;
        }
        .remark{
            margin-bottom: 20px;
            margin-right: 10px;
            color: #737373;
        }
    </style>
</head>
<body>
<div class="container-fluid bgcon" id="app">
    <div class="row" id="header">

    </div>
    <div class="row">
        <div class="col-md-2" id="left">

        </div>
        <div class="col-md-9" style="margin-left:30px;margin-top:10px">
            <div class="row tithead"><h3 class="glyphicon glyphicon glyphicon-bed"> 课程信息管理
            </h3></div>
            <div class="row" style="margin-top: 15px">
                <div class="col-md-2">
                    <select v-model="param.subType" class="form-control">
                        <option value="0">请选择科目</option>
                        <option v-for="s in subjects" :value="s.subId">{{s.subType}}</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <select v-model="param.classsess" class="form-control">
                        <option value="0">请选择场次</option>
                        <option value="1">上午场</option>
                        <option value="2">下午场</option>

                    </select>
                </div>

                <div class="col-md-3">
                    <button @click="reset" class="btn btn-default" style="margin-right:10px">
                        <i class="glyphicon glyphicon-repeat"></i> 重置
                    </button>
                    <button @click="query" class="btn btn-primary">
                        <i class="glyphicon glyphicon-search"></i> 查询
                    </button>
                </div>
            </div>
            <div class="row" style="margin-top: 15px">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover ">
                            <thead class="thead">

                            <tr>
                                <th width="8%" class="text-center">序号</th>
                                <th width="10%" class="text-center">教练名称</th>
                                <th width="7%" class="text-center">性别</th>
                                <th width="12%" class="text-center">教学时间</th>
                                <th width="7%" class="text-center">场次</th>
                                <th width="7%" class="text-center">开始时间</th>
                                <th width="7%" class="text-center">课时</th>
                                <th width="10%" class="text-center">所教科目</th>
                                <th width="8%" class="text-center">选课人数</th>
                                <th width="10%" class="text-center">备注</th>
                                <th class="text-center" colspan="3">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-if ="param.isCoach==0" v-for="(c,index) in classInfoes" class="text-center">
                                <td>{{index+1}}</td>
                                <td>{{c.coach.coaName}}</td>
                                <td v-if="c.coach.coaSex === 1">男</td>
                                <td v-else-if="c.coach.coaSex === 0">女</td>
                                <td>{{c.teaTime}}</td>
                                <td>{{c.classSess}}</td>
                                <td v-if="c.classSess=='上午场'">9:00</td>
                                <td v-if="c.classSess=='下午场'">14:00</td>
                                <td>{{c.classHour}}</td>
                                <td>{{c.subject.subType}}</td>
                                <td>{{c.reverse}}</td>
                                <td>{{c.remark}}</td>
                                <td>
                                    <button @click="order(c.classId,c.reverse)" class="btn btn-sm btn-primary">预约</button>
                                </td>
                                <td>
                                    <button @click="show(c.classId,c.reverse)" class="btn btn-sm btn-warning">修改</button>
                                </td>
                                <td>
                                    <button @click="remove(c.classId,c.reverse)" class="btn btn-sm btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr v-if ="param.isCoach==1" v-for="(c,index) in classInfoes" class="text-center">
                                <td>{{index+1}}</td>
                                <td>{{c.coach.coaName}}</td>
                                <td v-if="c.coach.coaSex === 1">男</td>
                                <td v-else-if="c.coach.coaSex === 0">女</td>
                                <td>{{c.teaTime}}</td>
                                <td>{{c.classSess}}</td>
                                <td v-if="c.classSess=='上午场'">9:00</td>
                                <td v-if="c.classSess=='下午场'">14:00</td>
                                <td>{{c.classHour}}</td>
                                <td>{{c.subject.subType}}</td>
                                <td>{{c.reverse}}</td>
                                <td>{{c.remark}}</td>
                                <td>
                                    <button  @click="show(c.classId,c.reverse)" class="btn btn-sm btn-warning">修改</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-center">
                    <nav aria-label="Page navigation">
                        <ul class="pagination" style="margin: 0">
                            <li @click="setpage(1)">
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li v-for="p in pages" @click="setpage(p)">
                                <a href="#">{{p}}</a>
                            </li>
                            <li @click="setpage(pages)">
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="row text-right remark"><h5>备注：预约人数最大为3人，如果大于3人则不允许预约. </h5></div>
        </div>
    </div>
</div>
<div id="type-delBox"></div>
<div id="type-delBox2"></div>
</body>
</html>